<template>
  <div>
    <div class="userinfo flex-box">
      <img class="photo" :src="userinfo.photo" alt="">
      <div class="info_text flex-box flex">
        <div class="flex">
          <span class="nickname">{{ userinfo.nickname }}</span>
          <span class="word_bg vip_level">vip {{ userinfo.vip_level }}</span>
          <span class="word_bg level">lv.{{ userinfo.level }}</span>
          <span class="word_bg user_coin">金币 {{ userinfo.coin }}</span>
        </div>
        <div class="explain flex">{{ userinfo.explain }}</div>
        <div class="btn_edit flex">点击修改个人信息</div>
      </div>
    </div>
    <line-hr/>
    <div class="fans_box flex-box botder_b">
      <div class="flex">1 · 关注</div>
      <div class="flex">2 · 粉丝</div>
    </div>
    <line-hr/>
    <div class="nav_list">
      <div class="item botder_b">
        <div class="icon-svg svg_message"></div>
        消息通知
      </div>
      <div class="item">
        <div class="icon-svg svg_qiandao"></div>
        暴击签到
      </div>
      <line-hr/>
      <div class="item">
        <div class="icon-svg svg_shoubing"></div>
        帖子
      </div>
      <line-hr/>
      <div class="item">
        <div class="icon-svg svg_pingtu"></div>
        评论
      </div>
      <line-hr/>
      <div class="item">
        <div class="icon-svg svg_mofang"></div>
        修改资料
      </div>
      <line-hr/>
      <div class="item">
        <div class="icon-svg svg_puke"></div>
        修改密码
      </div>
      <line-hr/>

      <div class="item">
        <div class="icon-svg svg_shuiqiang"></div>
        退出登录
      </div>
    </div>
  </div>
</template>

<script>
import PlaneHeader from "@/components/common/PlaneHeader.vue";

export default {
  data() {
    return {
    };
  },
  computed: {
    userinfo() {
      return this.$store.state.userinfo;
    }
  },
  components: {
    PlaneHeader
  },
  methods: {
  }
};
</script>

<style scoped lang="less">
.userinfo {
  margin: .75rem;
  .info_text {
    padding: 0 .5rem;
    flex-direction: column;
    // align-items: flex-start;
    justify-content: center;
    >div {
      display: flex;
      align-items: center;
    }
  }
  .photo {
    width: 4rem;
    height: 4rem;
    border-radius: .1rem;
    background-color: #eee;
    box-shadow: 0 0 0.5rem rgb(209, 209, 209);
  }
  .nickname {
    font-size: .8rem;
    font-weight: 700;
    color: rgb(124, 138, 148);
  }
  .word_bg {
    color: #FFF;
    margin-left: .25rem;
    padding: 0 .2rem;
    border-radius: .1rem;
    font-size: .6rem;
    font-weight: 400;
    background: #00ca7d;
    &.vip_level {
      background: #6d6e75;
    }
    &.level {
      background: #149dec;
    }
  }
  .explain {
    font-size: .6rem;
    color: rgb(148, 124, 124);
  }
  .btn_edit {
    color: #0894ec;
  }
}
.fans_box {
  // line-height: 2rem;
  >.flex {
    text-align: center;
    padding: .6rem 1rem;
  }
}
.botder_b {
  border-bottom: .4rem solid rgba(0, 0, 0, 0.1);
}
.item {
  position: relative;
  display: flex;
  background: #FFF;
  border-radius: 3px;
  padding: .6rem 1rem;
  padding-right: 1.8rem;
  font-size: .8rem;
  color: #555;
  &:after {
      content: '';
      position: absolute;
      right: 0.8rem;
      top: 50%;
      margin-top: -0.5rem;
      width: 0.8rem;
      height: 0.8rem;
      background-image: url(/static/svg/arrow-right.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
  }
  .icon-svg {
    margin-right: .5rem;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.25rem;
    &.svg_message {
      background-image: url(/static/svg/user/message.svg);
    }
    &.svg_qiandao {
      background-image: url(/static/svg/user/qiandao.svg);
    }
    &.svg_shoubing {
      background-image: url(/static/svg/user/shoubing.svg);
    }
    &.svg_pingtu {
      background-image: url(/static/svg/user/pingtu.svg);
    }
    &.svg_mofang {
      background-image: url(/static/svg/user/mofang.svg);
    }
    &.svg_puke {
      background-image: url(/static/svg/user/puke.svg);
    }
    &.svg_shuiqiang {
      background-image: url(/static/svg/user/shuiqiang.svg);
    }
  }
}
</style>
